<template>
	<view class=" danmu">
		<scroll-view scroll-y="true" style="width: 520rpx;height: 300rpx;" scroll-with-animation="true" class="pl-3" :scroll-into-view="scrollIntoView" :show-scrollbar="false">
			<view :id="'danmu' + item.id" class="flex justify-start align-start rounded p-2 mb-2"
				style="background-color: rgba(255, 255, 255, 0.2);" v-for="(item,index) in list" :key="index">
				<text class="font-md text-danger">{{item.name}}：</text>
				<text class="font-md text-white">{{item.content}}</text>
			</view>
		</scroll-view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				list: [],
				scrollIntoView:"",
			}

		},
		methods:{
			send(data){
				this.list.push(data);
				this.toBottom();			
			},
			toBottom(){
				setTimeout(() => {
					let len = this.list.length;
					if(len > 0 && this.list[len - 1]){
						this.scrollIntoView = 'danmu' + this.list[len-1].id
					}
				},200)
				
			}
		}
		
	}
</script>

<style>
	.danmu {
		position: fixed;
		bottom: 120rpx;
		left: 0;
		right: 0;
		width: 520rpx;
		height: 300rpx;
	}
</style>
